import React, { Component } from 'react';
import axios from 'axios'
import { withRouter } from 'react-router-dom'
class MaybeLike extends Component {
  state = {
    newItemList: []
  }
  componentDidMount() {
    const id = this.props.location.search.split('=')[1]
    var formData = new FormData();
    formData.append("id", id);
    axios({
      url: '/xhr/wapitem/rcmd.json',
      method: 'post',
      headers: { 'X-Requested-With': 'XMLHttpRequest' },
      data: formData
    }).then(res => {
      const arr = res.data.data.items;
      this.setState({
        newItemList: [arr.slice(0, 2), arr.slice(2, 4), arr.slice(4, 6), arr.slice(6)]
      })
    })
  }
  render() {
    return (
      <div>
        {
          this.state.newItemList && this.state.newItemList.map((item, i) => (
            <div className='NewItemList' key={i}>
              {
                item.map(v => (
                  <div className="NewItemListItem" key={v.displaySkuId} onClick={() => {
                    this.props.history.push("/ProductDetail/?id=" + v.id)
                    this.refreshPage()
                  }}>
                    <img src={v.primaryPicUrl} alt="" />
                    <div className="newItemTitle">{v.name}</div>
                    <div className="newItemPrice">¥{v.retailPrice}</div>
                    <div className="newItemTag">
                      {
                        v.itemTagList && v.itemTagList.map(val => (
                          <span key={val.tagId + '-' + v.itemId}>{val.name}</span>
                        ))
                      }
                    </div>
                  </div>
                ))
              }
            </div>
          ))
        }
      </div>)
  }
}

export default withRouter(MaybeLike);
